<template>
  <div class="nav_bar">
		<div class="nav_item">
			<p :class="choseid == item.id?'chosed':''"
				v-for="(item,index) in navArr" 
				:key="index"
				@click="choseNav(item)">{{item.value}}</p>
		</div>
		<div class="info">
			<!-- <img src="../assets/avatar.png" alt="" /> -->
			<span>{{userId}}</span>
			<span class="tui" @click="loginOut"><i class="el-icon-switch-button"></i></span>
		</div>
	</div>
</template>

<script>
export default {
	props:['choseid'],
	data() {
		return {
			navArr:[
				{id:1,value:'benchmark',path:'/'},
				{id:2,value:'about',path:'/about'},
			],
			userId:'',
		}
	},
	mounted(){
		this.userId = sessionStorage.getItem('userId')
	},
	methods:{
		choseNav(item){
			setTimeout(()=>{
				this.$router.push({
					path:item.path
				})
			},100)
		},
		loginOut(){
			// 退出登录
			sessionStorage.setItem('token','')
			sessionStorage.setItem('userId','')
			this.$router.push('/login')
		}
	}
}
</script>

<style lang="scss" scoped>
.nav_bar {
	height: 76px;
	background: #191a23;
	padding-right: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	.nav_item{
		display: flex;
		align-items: center;
		p{
			color:#fff;
			margin-right: 20px;
			cursor: pointer;
		}
		.chosed{
			color:#409EFF;
		}
	}
	.info {
		height: 100%;
		padding: 0 12px;
		line-height: 76px;
		display: flex;
		align-items: center;
		.tui {
			margin-left: 10px;
			font-size: 20px;
		}
		img {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-right: 10px;
		}
		span {
			font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
				Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
			color: #fff;
		}
	}
}
</style>